<template>
  <div class="userlist">
    <div class="userlist-title">
      <span>{{ loginuser.username }}</span>
      <img :src="loginuser.avatarurl" alt="" @click="logout" />
    </div>
    <ul class="userlist-main">
      <li
        class="list-item"
        v-for="(item, index) in chatlist"
        :key="'userlist' + index"
        @click="chooseChat(index)"
      >
        <div class="user-info">
          <img
            :src="item.avatarurl"
            :class="{ disonline: item.isonline !== 1 }"
            alt=""
          />
          <span>{{ item.username }}</span>
          <div
            class="little-point"
            :class="{ active: unReadListUser.indexOf(item.username) !== -1 }"
          ></div>
        </div>
        <div class="user-time">
          2020-08-23
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['chatlist', 'loginuser', 'unreadlist'],
  computed: {
    unReadListUser() {
      return this.unreadlist.map((item) => {
        return item.fromuser
      })
    },
  },
  methods: {
    chooseChat(index) {
      // console.log(index);
      this.$emit('chat-user', { index })
    },
    logout() {
      window.confirm
      let r = confirm('确认退出？')
      if (r == true) {
        this.$parent.changeView(0)
      }
    },
  },
}
</script>

<style scoped>
.userlist {
  width: 100vw;
  height: 100vh;
}

.userlist-title {
  display: flex;
  height: 4rem;
  background-color: #ffffff;
  box-shadow: 2px 0 10px #cccccc;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1rem;
}

.userlist-title img {
  width: 3rem;
  height: 3rem;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 3px 3px 6px #666666;
}
.userlist-title span {
  font-weight: bold;
  padding-right: 1rem;
  font-size: 1.5rem;
}

.list-item {
  display: flex;
  height: 6rem;
  padding: 0 1rem;
  justify-content: space-between;
  align-items: center;
  position: relative;
  border-bottom: 2px solid #eeeeee;
}

.list-item:active {
  background-color: #eeeeee;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-info .little-point {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  left: 4rem;
  top: 4rem;
  display: none;
}
.little-point.active {
  display: block;
}

.user-info img {
  width: 4rem;
  height: 4rem;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 3px 3px 6px #666666;
}

.user-info img.disonline {
  /* filter: grayscale(1); */
}

.user-info span {
  margin-left: 0.9375rem;
}

.user-time {
  font-size: 12px;
}
</style>
